@charset "utf-8";
// Copyright 2019 Google Inc. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

:root {
  --timesketch-blue: #0071bc;
  --font-color-dark: rgba(0, 0, 0, 0.87);
  --font-color-dark-dimmed: rgba(0, 0, 0, 0.6);
  --font-color-grey: #c9c9c9;
  --font-color-light: #fafafa;
  --font-color-red: #ca2b2b;
  --search-input-light: #ffffff;
  --search-input-dark: #464646;
  --font-size-small: 13px;
  --font-size-regular: 14px;
  --font-size-large: 16px;
  --font-size-title: 20px;
}

[data-theme='light'] {
  color-scheme: light;
  --background-color: linear-gradient(90deg, rgba(249, 249, 249, 1) 11%, rgba(241, 241, 241, 1) 100%);
  --default-font-color: var(--font-color-dark);
  --default-link-color: var(--font-color-dark);
  --default-title-font-color: var(--font-color-dark);
  --navbar-background: #ffffff;
  --navbar-font-color: var(--font-color-dark);
  --navbar-border-color: #f5f5f5;
  --tabs-link-color: var(--font-color-dark-dimmed);
  --tabs-link-hover-color: var(--font-color-dark);
  --tabs-link-active-color: var(--font-color-dark);
  --tabs-link-active-border-bottom-color: transparent;
  --tabs-link-hover-border-bottom-color: transparent;
  --tabs-border-bottom-color: transparent;
  --card-background-color: hsl(0, 0%, 100%);
  --card-font-color: hsl(0, 0%, 29%);
  --card-accent-background-color: #f5f5f5;
  --card-accent-font-color: var(--font-color-dark);
  --search-input-home: var(--search-input-light);
  --search-input-explore: #f9f9f9;
  --search-input-font-color: var(--font-color-dark);
  --search-input-background-color: #ffffff;
  --search-input-border-color: #d3d3d3;
  --button-greyscale: grayscale(0%);
  --button-color: var(--font-color-dark);
  --button-background-color: #ffffff;
  --button-border-color: #dbdbdb;
  --timeline-name-column-background: #f1f1f1;
  --timeline-name-column-font-color: #999999;
  --table-cell-border-color: #d3d3d3;
  --table-row-hover-background-color: #e0e0e0;
  --time-bubble-background-color: #f5f5f5;
  --time-bubble-font-color: #666666;
  --tag-background-color: #f1f1f1;
  --content-list-hover-color: #fcfcfc;
  --content-list-border-color: #eeeeee;
  --login-page-background-color: var(--navbar-background);
  --card-title-font-color: var(--font-color-dark);
  --card-header-border-color: #f5f5f5;
  --button-font-color: var(--font-color-dark);
  --form-label-font-color: var(--font-color-dark);
  --message-header-background-color: rgba(229, 229, 229, 0.84);
  --message-header-font-color: #333333;
  --message-background-color: #f9f9f9;
  --message-body-color: var(--font-color-dark);
  --markdown-body-font-color: var(--font-color-dark);
  --spinner-color: #333333;
  --input-background-color: var(--search-input-light);
  --input-color: var(--font-color-dark);
  --input-placeholder-color: var(--font-color-grey);
  --highlight-color: #ddd;
  --dropdown-background-color: #fff;
  --hr-color: var(--navbar-border-color);
  --pre-background-color: var(--card-background-color);
  --pre-font-color: var(--default-font-color);
}

[data-theme='dark'] {
  color-scheme: dark;
  --background-color: #121212;
  --background-color-2: #1a1b1e;
  --background-color-3: #25272c;
  --background-color-4: #32353b;
  --background-color-5: #3e4249;
  --default-font-color: var(--font-color-light);
  --default-link-color: var(--font-color-light);
  --default-title-font-color: var(--font-color-light);
  --navbar-background: var(--background-color-2);
  --navbar-font-color: var(--font-color-light);
  --navbar-border-color: var(--background-color-3);
  --tabs-link-color: hsl(0, 0%, 60%);
  --tabs-link-hover-color: var(--font-color-light);
  --tabs-link-active-color: var(--font-color-light);
  --tabs-link-active-border-bottom-color: transparent;
  --tabs-link-hover-border-bottom-color: transparent;
  --tabs-border-bottom-color: transparent;
  --card-background-color: var(--background-color-2);
  --card-font-color: #fafafa;
  --card-accent-background-color: var(--background-color-3);
  --card-accent-font-color: var(--font-color-light);
  --search-input-home: var(--search-input-dark);
  --search-input-explore: var(--search-input-dark);
  --search-input-font-color: var(--font-color-light);
  --search-input-background-color: var(--background-color-3);
  --search-input-border-color: transparent;
  --button-greyscale: grayscale(25%);
  --button-color: var(--font-color-light);
  --button-background-color: var(--background-color-3);
  --button-border-color: var(--background-color-5);
  --timeline-name-column-background: var(--background-color-4);
  --timeline-name-column-font-color: #d9d9d9;
  --table-background-color: var(--background-color-3);
  --table-row-background-color: var(--background-color-3);
  --table-row-hover-background-color: var(--background-color-4);
  --table-head-cell-color: #fafafa;
  --table-color: #fafafa;
  --table-cell-border-color: var(--background-color-4);
  --event-list-row-background-color: var(--background-color-3);
  --event-list-row-background-hover-color: var(--background-color-4);
  --time-bubble-background-color: var(--background-color-4);
  --time-bubble-font-color: #d9d9d9;
  --content-list-hover-color: var(--background-color-3);
  --content-list-border-color: var(--background-color-3);
  --login-page-background-color: var(--background-color);
  --navbar-item-link-color: #fafafa;
  --card-title-font-color: var(--font-color-light);
  --card-header-border-color: var(--background-color-3);
  --button-font-color: var(--font-color-light);
  --form-label-font-color: var(--font-color-light);
  --message-header-background-color: var(--background-color-2);
  --message-header-font-color: var(--font-color-light);
  --message-background-color: var(--background-color-3);
  --message-body-color: var(--font-color-light);
  --markdown-body-font-color: var(--font-color-light);
  --spinner-color: #ffffff;
  --input-background-color: var(--background-color-3);
  --input-color: var(--font-color-light);
  --input-placeholder-color: #969696;
  --tag-background-color: var(--background-color-5);
  --tag-font-color: var(--font-color-light);
  --highlight-color: #666;
  --dropdown-background-color: var(--background-color-3);
  --hr-color: var(--background-color-5);
  --pre-background-color: var(--background-color-2);
  --pre-font-color: var(--default-font-color);
}

// Customize Bulma
$family-primary: Arial, sans-serif;
$body-size: 15px;

$section-padding: 15px 0 0 0;

$card-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
$card-header-shadow: none;

$info: rgb(66, 133, 244);
$primary: rgb(66, 133, 244);
$success: #41ad49;

$table-background-color: var(--table-background-color);
$table-row-hover-background-color: var(--table-row-hover-background-color);
$table-head-cell-color: var(--table-head-cell-color);
$table-cell-border: 1px solid var(--table-cell-border-color);
$table-color: var(--table-color);
$table-cell-padding: 10px;

$box-shadow: 0px;
$box-color: var(--default-font-color);
$box-background-color: var(--card-background-color);

$tabs-link-color: var(--tabs-link-color);
$tabs-link-hover-color: var(--tabs-link-hover-color);
$tabs-link-active-color: var(--tabs-link-active-color);
$tabs-link-active-border-bottom-color: var(--tabs-link-active-border-bottom-color);
$tabs-link-hover-border-bottom-color: var(--tabs-link-hover-border-bottom-color);
$tabs-border-bottom-color: var(--tabs-border-bottom-color);

$input-background-color: var(--input-background-color);
$input-color: var(--input-color);
$input-placeholder-color: var(--input-placeholder-color);

$button-text-color: var(--button-font-color);
$button-text-hover-color: var(--button-font-color);
$button-text-hover-background-color: transparent;

$button-color: var(--button-color);
$button-focus-color: var(--button-color);
$button-background-color: var(--button-background-color);
$button-border-color: var(--button-border-color);

$title-color: var(--default-title-font-color);

$navbar-item-color: var(--navbar-item-link-color);

$label-color: var(--form-label-font-color);

$message-header-background-color: var(--message-header-background-color);
$message-header-color: var(--message-header-font-color);
$message-background-color: var(--message-background-color);
$message-body-color: var(--message-body-color);

$dropdown-background-color: #333;

// Font Awesome
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/solid';

// Import Bulma and Buefy styles
@import '~bulma';
@import '~buefy/src/scss/buefy';

// Global CSS
html,
body {
  height: 100%;
  overflow: auto;
  font-family: 'Arial';
  font-size: var(--font-size-regular);
}

body {
  background: var(--background-color);
  color: var(--default-font-color);
}

hr {
  border: 1px solid var(--hr-color);
}

pre {
  background-color: var(--pre-background-color);
  color: var(--pre-font-color);
}

.login-page {
  background: var(--login-page-background-color);
  color: var(--default-font-color);
}

.card {
  border-radius: 5px;
  background: var(--card-background-color);
  color: var(--card-font-color);
}

.card-header {
  border-bottom: 1px solid var(--card-header-border-color);
}

.card-accent-background {
  background-color: var(--card-accent-background-color);
  color: var(--card-accent-font-color);
}

.card-header-title {
  color: var(--card-title-font-color);
}

.ts-timeline-color-box {
  width: 43px;
  height: 43px;
  margin-top: 2px;
  margin-right: 10px;
  border-radius: 4px;
}

ul.content-list {
  list-style: none;
}

ul.content-list > li {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--content-list-border-color);
  display: block;
  margin: 0;
}

ul.content-list > li:hover {
  background: var(--content-list-hover-color);
}

ul.content-list > li:last-child {
  border-bottom: none;
}

.ts-search-input {
  outline: none;
  border: none;
  font-size: 1.2em;
  border-radius: 12px;
  padding: 25px;
  height: 34px;
  background: var(--search-input-background-color);
  color: var(--search-input-font-color);
  width: 100%;
}

.ts-search-box {
  border: 1px solid var(--table-cell-border-color);
  border-radius: 12px;
  background: var(--search-input-background-color);
}

.ts-home-input {
  outline: none;
  border: none;
  border-radius: 5px;
  background: var(--search-input-explore);
  color: var(--search-input-font-color);
  padding: 13px;
  width: 50%;
}

.button.ts-search-dropdown {
  outline: 0;
  border: none;
  border-radius: 5px 0 0 5px;
  padding: 25px;
  background: var(--card-accent-background-color);
  color: var(--search-input-font-color);
}

.ts-home-search-input {
  outline: none;
  border: none;
  font-size: 1.2em;
  border-radius: 5px;
  padding: 15px;
  background: var(--search-input-home);
  color: var(--search-input-font-color);
  width: 100%;
}

::placeholder {
  color: var(--input-placeholder-color);
  opacity: 1;
}

:-ms-input-placeholder {
  color: var(--input-placeholder-color);
}

::-ms-input-placeholder {
  color: var(--input-placeholder-color);
}

strong {
  color: var(--default-font-color);
}

a,
a:hover {
  color: var(--default-link-color);
}

.button,
.button:hover {
  color: var(--button-font-color);
}

.ts-dropdown-button,
.ts-dropdown-button:hover {
  color: var(--button-font-color);
}

.navbar {
  background: var(--navbar-background);
  color: var(--navbar-font-color);
}

.tag:not(body) {
  background-color: var(--timeline-name-column-background);
  color: var(--default-font-color);
}

.ts-event-list-row-background-color {
  background-color: var(--event-list-row-background-color);
  color: var(--event-list-row-font-color);
}

.ts-event-list-row-background-color:hover {
  background-color: var(--event-list-row-background-hover-color);
}

.ts-timeline-name-column-color {
  background: var(--timeline-name-column-background);
  color: var(--timeline-name-column-font-color);
}

// Time bubble
.ts-time-bubble-color {
  background: var(--time-bubble-background-color);
}

.ts-time-bubble-color h5 {
  color: var(--time-bubble-font-color);
}

.ts-time-bubble-vertical-line-color {
  background: var(--time-bubble-background-color);
}

.ts-markdown-body-color {
  color: var(--markdown-body-font-color);
}

.button.is-small {
  border-radius: 4px;
}

.pagination-previous,
.pagination-next,
.pagination-link {
  color: var(--default-font-color);
}

// Search History tree
// Based on http://fractaledmind.com/articles/css-tree/
.tree {
  list-style: none;

  &,
  * {
    margin: 0;
    padding: 0;
  }

  li {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;

    position: relative;
    padding-left: 1vw;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      border-top: 1px solid #d4d4d4;
      width: 1vw;
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      border-left: 1px solid #d4d4d4;
    }
    &:only-child::after {
      border-left: 0;
    }

    &:last-of-type::after {
      height: 50%;
      top: 0;
    }

    &:first-of-type::after {
      height: 50%;
      bottom: 0;
    }

    &:not(:first-of-type):not(:last-of-type)::after {
      height: 100%;
    }
  }

  ul,
  ol {
    padding-left: 1vw;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      border-top: 1px solid #d4d4d4;
      width: 1vw;
    }

    &:not(:first-of-type):not(:last-of-type)::after {
      height: 100%;
    }
  }

  ul,
  ol {
    padding-left: 1vw;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      border-top: 1px solid #d4d4d4;
      width: 1vw;
    }
  }

  span {
    background-color: #dddddd;
    text-align: center;
    padding: 0.33em 0.66em;
    border-radius: 4px;
    cursor: pointer;
    min-width: 100px;
  }

  span {
    background-color: #dddddd;
    text-align: center;
    padding: 0.33em 0.66em;
    border-radius: 4px;
    cursor: pointer;
    min-width: 100px;
  }

  > li {
    padding-left: 0;

    &::before,
    &::after {
      display: none;
    }
  }
}

.dropdown-menu {
  border-radius: 6px;
}

.dropdown-content {
  padding: 0;
  background-color: transparent;
  border-radius: 6px;
}

.ts-dropdown-item {
  padding: 7px;
  cursor: pointer;
}

.ts-dropdown-item:hover {
  background-color: var(--table-row-hover-background-color);
}

// Style Color picker component
.vc-compact {
  box-shadow: none;
  background-color: transparent;
}

.b-table .table tr.detail {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
